import React, { Component } from "react";
import { NavBar, Icon, Carousel } from "antd-mobile";
import { connect } from "react-redux";
import "./goods.scss";
import "../../assets/font/iconfont.css";
import { getGoodsList } from "../../store/action/actions";
class goods extends Component {
  state = {
    imgHeight: 245,
    souchang: false,
  };
  souChang = () => {
    // 先判断是否有local
    let cont_str = localStorage.getItem("cont");
    let cont = JSON.parse(cont_str || "[]");
    console.log(cont);
    // 没有收藏
    if (cont.length === 0) {
      cont.push(this.props.goodList);
      localStorage.setItem("cont", JSON.stringify(cont));
      this.setState({
        souchang: true,
      });
    } else {
      let index = cont.findIndex((v) => {
        if (v.goods_id == this.props.match.params.id) {
          return true;
        }
      });
      if (index === -1) {
        cont.push(this.props.goodList);
        localStorage.setItem("cont", JSON.stringify(cont));
        this.setState({
          souchang: true,
        });
      } else {
        cont.splice(index, 1);
        localStorage.setItem("cont", JSON.stringify(cont));
        this.setState({
          souchang: false,
        });
      }
    }
  };
  handleClick = () => {
    this.props.history.push("/cart");
  };
  handleBuy = () => {
    // 先判断是否有local
    let shop_str = localStorage.getItem("shop");
    let shop = JSON.parse(shop_str || "[]");
    let { goodList } = this.props;
    // 没有添加
    if (shop.length === 0) {
      goodList.num = 1;
      goodList.checked = true;
      shop.push(goodList);
      localStorage.setItem("shop", JSON.stringify(shop));
    } else {
      let index = shop.findIndex((v) => {
        if (v.goods_id == this.props.match.params.id) {
          return true;
        }
      });
      //  没有相同商品
      if (index === -1) {
        goodList.num = 1;
        goodList.checked = true;
        shop.push(goodList);
        localStorage.setItem("shop", JSON.stringify(shop));
      } else {
        shop[index].num=goodList.num++
        localStorage.setItem("shop", JSON.stringify(shop));
        this.setState({
          souchang: false,
        });
      }
    }
  };
  componentDidMount() {
    let cont_str = localStorage.getItem("cont");
    let cont = JSON.parse(cont_str || "[]");
    let index = cont.findIndex((v) => {
      if (v.goods_id == this.props.match.params.id) {
        return true;
      }
    });
    if (index === -1) {
      this.setState({
        souchang: false,
      });
    } else {
      this.setState({
        souchang: true,
      });
    }
    let id = parseInt(this.props.match.params.id);
    this.props.getGoods("/goods/detail", {
      params: {
        goods_id: id,
      },
    });
  }
  render() {
    let { goods_introduce } = this.props.goodList;
    return (
      <div className="ygshopGoods">
        {/* 标题栏开始 */}
        <div className="ygGoodsTitle">
          <NavBar
            icon={<Icon type="left" />}
            onLeftClick={() => this.props.history.go(-1)}
          >
            商品分类
          </NavBar>
        </div>
        {/* 标题栏结束 */}
        {/* 轮播图开始 */}
        {/* <div className="ygshopGoodsSwiper"> */}
        <Carousel autoplay={true} infinite>
          {this.props.goods.map((val) => (
            <div
              key={val}
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight,
              }}
            >
              <img
                src={val.pics_big}
                alt="图片加载失败"
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </div>
          ))}
        </Carousel>
        {/* </div> */}
        {/* 轮播图结束 */}
        {/* 价格和收藏 */}
        <div className="ygshopGoods_price">
          <div className="price">￥ {this.props.goodList.goods_price}</div>
          <div className="icon">
            <i className="iconfont icon-fenxiang1"></i>
            <i
              className={
                this.state.souchang
                  ? "iconfont icon-shoucang add"
                  : "iconfont icon-shoucang"
              }
              onClick={this.souChang}
            ></i>
          </div>
        </div>
        {/* 文字 */}
        <div className="ygshopGoods_title">
          {this.props.goodList.goods_name}
        </div>
        {/* 图文详情 */}
        <div className="ygshopGoods_imgText">
          <div className="ygshop_text">图文详情</div>
          <div className="ygshop_img">
            <div dangerouslySetInnerHTML={{ __html: goods_introduce }} />
          </div>
          >
        </div>
        {/* 底部购物车 */}
        <div className="ygshopGoods_Cart">
          <div className="ygshopGoods_icon1">
            <i className="iconfont icon-kefu"></i>
            <span>联系客服</span>
          </div>
          <div className="ygshopGoods_icon2">
            <i
              className="iconfont icon-gouwuche"
              onClick={this.handleClick}
            ></i>
            <span>购物车</span>
          </div>
          <div className="ygshopGoods_add" onClick={this.handleBuy}>
            加入购物车
          </div>
          <div className="ygshopGoods_pay">立即支付</div>
        </div>
      </div>
    );
  }
}
const mapGoodState = (store) => {
  return {
    goodList: store.SEARCH.goodList,
    goods: store.SEARCH.goods,
  };
};
const mapGoodAction = (dispatch) => {
  return {
    getGoods: (url, params) => dispatch(getGoodsList(url, params)),
  };
};
export default connect(mapGoodState, mapGoodAction)(goods);
